<template>
    <!-- 人员组件 -->
    <view class="member-item">
					<view class="headimg">
            <view :class="memData.userId==userInfo.id?'bor':''">
              <image v-if="memData.playerIcon" :src="(memData.playerIcon.indexOf('player-icon-boy') > -1 || memData.playerIcon.indexOf('player-icon-gril') > -1) ? memData.userIcon : memData.playerIcon" mode=""></image>
              <templat v-else>
                <image :src="memData.userIcon" mode=""></image>
              </templat>
            </view>
						<view v-if="memData.sex=='1'" class="icon m"></view>
						<view v-if="memData.sex=='2'" class="icon w"></view>
					</view>
					<view class="member-name">
						{{memData.relName}}
					</view>
					<view v-if="memData.sex=='1'" class="jibieM">
						<view :class="memData.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{memData.playerSkillLevel||'0'}}
					</view>
					<view v-if="memData.sex=='2'" class="jibieW">
						<view :class="memData.sex=='1'?'jlbicon jlbm':'jlbicon jlbw'"></view>
						级别L{{memData.playerSkillLevel||'0'}}
					</view>
		</view>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  name:'memCon',
  props:[
      'memData',
  ],
  data(){
    return{


    }
  },
  computed: {
    ...mapState(["userInfo", "accessToken","sportEventId"])
  },
}
</script>
<style lang="scss" scoped>
    .member-item{
      // margin-left: 35rpx;
      width:128rpx;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      margin-bottom:30rpx;
      .headimg{
        width: 128rpx;
        height: 128rpx;
        position: relative;
        margin-bottom:15rpx;
        >view{
          width:128rpx;
          height:128rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .icon{
          position: absolute;
          width:38rpx;
          height:37rpx;
          right: 0;
          top:0;
          &.m{
            background:url('@/static/images/icon_m.png') no-repeat;
            background-size: 100% 100%;
          }
          &.w{
            background:url('@/static/images/icon_w.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .bor{
        width:128rpx;
        height: 128rpx;
        box-sizing: border-box;
        border:2px solid #99bff9;
        border-radius: 128rpx;
      }
      image{
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
				background: url($public-baseImgUrl+'icon_renshu.png') center no-repeat;
        background-size: 100% 100%;
      }
      
      
      .member-name{
        width:100%;
        text-align: center;
        line-height: 30rpx;
        font-size: 26rpx;
        color: $text-color-grey;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-bottom:10rpx;
      }
      .jibieM{
				font-size: 22rpx;
				color:#2E87FF;
				border:1px solid #C8DBFF;
				padding-right:7rpx;
				border-radius: 5rpx;
				display:flex;
				flex-wrap: nowrap;
				box-sizing: border-box;
				line-height:32rpx;
			}
			.jibieW{
				font-size: 22rpx;
				color:#E14806;
				border:1px solid #FFC8C3;
				padding-right:7rpx;
				border-radius: 5rpx;
				display:flex;
				box-sizing: border-box;
				line-height:32rpx;
			}
			.jbicon{
				margin-left:5rpx;
			}
      
    }
</style>


